<!-- 代码编辑弹窗 -->
<template>
    <el-dialog
        v-model="showDialog"
        :title="dialogTitle"
        width="750px"
        top="38px"
        append-to-body
        destroy-on-close
        @close="onClose"
    >
        <div class="content">
            <!-- <monaco-editor
                ref="monacoRef"
                :value="codeValue"
                language="json"
                width="100%"
                height="444px"
            /> -->
            <code-editor
                v-model="codeValue"
                placeholder=""
                :style="{ width: '100%', height: '444px' }"
                :autofocus="true"
                :indent-with-tab="true"
                :tab-size="2"
                :extensions="extensions"
                js-beautify
            />
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onConfirm">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { randomStr } from '@/libs/tools'
import bus from '@/libs/bus'
// import MonacoEditor from '@/components/monaco-editor'
import CodeEditor from '@/components/code-editor'
import { json } from '@codemirror/lang-json'
export default defineComponent({
    name: 'CodeEditorDialog',
    components: {
        // MonacoEditor
        CodeEditor
    },
    setup() {
        const busId = randomStr(16)
        const showDialog = ref(false)
        const codeValue = ref('')
        const dialogTitle = ref('')

        // const monacoRef = ref(null)

        const extensions = [
            json()
        ]

        /**
         * 打开弹窗
         * @param {String} type 事件类型 page页面类型，widget控件类型
         * @param {Object} data 事件数据
         */
        const show = ({ title = '代码编辑', content = '' }) => {
            dialogTitle.value = title
            codeValue.value = content
            showDialog.value = true
            return new Promise((resolve, reject) => {
                bus.on(`${busId}-confirm`, () => {
                    showDialog.value = false
                    // codeValue.value = monacoRef.value.getValue()
                    resolve(codeValue.value)
                })
                bus.on(`${busId}-cancel`, () => {
                    showDialog.value = false
                    reject()
                })
            })
        }

        const onClose = () => {
            bus.off(`${busId}-confirm`)
            bus.off(`${busId}-cancel`)
        }

        const onCancel = () => {
            bus.emit(`${busId}-cancel`)
        }
        const onConfirm = () => {
            bus.emit(`${busId}-confirm`)
        }

        return {
            showDialog,
            dialogTitle,
            codeValue,
            // monacoRef,
            extensions,

            show,
            onClose,
            onCancel,
            onConfirm
        }
    }
})
</script>

<style lang="less" scoped>
.content {
    border: 1px solid var(--edit-border-color);
}
</style>